import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';


console.log('React');
console.log(React);
console.log('ReactDOM');
console.log(ReactDOM);


function App() {
    return (
        <div className="App">
            App组件，内有嵌套的组件
            <Cc name='Cc是一个 类 组件，组件内接收外部变量用 this.props.name'/>
            <Welcome xx='Welcome是一个 函数 组件接收外部变量xx 用props.xx props以函数参数的形成传入'/>
            <Son/>
        </div>
    );
}

class Cc extends React.Component {
    render() {
        return <h3>{this.props.name}</h3>
    }
}

function Welcome(props) {
    return <h3>{props.xx},我是函数组件，以后的趋势也是用函数组件</h3>
}

class Son extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            n: 0
        }
    }

    add() {
        this.setState({n: this.state.n + 1})
    }

    render() {
        return (
            <div className="Son">
                儿子的n:{this.state.n}
                <button onClick={() => this.add()}> +1</button>
                <Grandson/>
            </div>
        );
    }
}

const Grandson = () => {
    const [y, setN] = React.useState(0)
    return (
        <div>
            孙子的n:{y}
            <button onClick={()=>setN(y+1)}>+1</button>
        </div>
    )
}

export {App};


